<template>
  <view class="container">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view
          class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'"
        >
          <!-- <image :src="staticUrl + '/home/back.png'" alt="" class="back" @click="clickBack"></image> -->
          <uni-icons type="left" size="24" class="back" @click="clickBack"></uni-icons>
          <view class="seach">
            <icon type="search" size="16" class="search" />
            <input v-model="params.keyword" :placeholder="placeholder" />
            <icon type="clear" size="16" class="clear" @click="clear" v-if="params.keyword" />
          </view>
          <text @click="search">搜索</text>
        </view>
      </view>
    </view>

    <view class="notFound" v-if="!list.length">
      <image src="./static/notfound.png"></image>
      <text v-if="type === 'goods'">暂无商品信息</text>
      <text v-else>暂无客户信息</text>
    </view>

    <view :style="'margin-top:' + (topBarHeight + 10) + 'px'" class="list" v-if="type !== 'goods'">
      <view v-for="(i, j) in list" :key="j" class="item">
        <view style="display: flex">
          <text class="label">客户名称：</text>
          <text class="value">{{ type === 'bill' ? i.purchaserName : i.name }}</text>
        </view>
        <view class="label_margintop">
          <text class="label">客户编号：</text>
          <text>{{ i.businessCode }}</text>
        </view>
        <view class="label_margintop" v-if="type === 'client'">
          <text class="label">客户类型：</text>
          <text>{{ setType(i.mold) }}</text>
        </view>
        <view class="label_margintop" v-if="type !== 'client'">
          <text class="label">商品数量：</text>
          <text>{{ i.goodsNum }}</text>
        </view>
        <view class="label_margintop" v-if="type !== 'client'">
          <text class="label">商品金额：</text>
          <text class="label_red">￥{{ i.goodsPrice }}</text>
        </view>
        <view class="bill" v-if="type === 'client'">
          <view @click="goBill(i.id)" class="btn">去提单</view>
        </view>
        <view class="bill" v-if="type === 'bill'">
          <view @click="goBill(i.purchaserId)" class="btn">编辑</view>
        </view>
      </view>
    </view>
    <!-- 搜索商品 -->
    <view v-else :style="'margin-top:' + (topBarHeight + 10) + 'px'">
      <!-- 组件 -->
      <view v-for="item in list" class="goods-list">
        <commodity :commodityObj="item" :type="'goods'" :ids="id"> </commodity>
      </view>
    </view>
  </view>
</template>

<script>
import { getPurchaser } from '@/api/reg'
import { getSearchList, getCartsList } from '@/api/invoicer/index.js'
import commodity from './components/commodity.vue'
import { getClientList, setCarts } from '@/api/invoicer'

export default {
  components: {
    commodity
  },
  data() {
    return {
      placeholder: '',
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      params: {
        keyword: '',
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      list: [],
      molds: [],
      type: '',
      id: ''
    }
  },
  onLoad(e) {
    this.id = e.id //客户id
    this.type = e.type
    if (this.type === 'bill' || this.type === 'client') {
      this.search()
    }
    switch (this.type) {
      case 'bill':
        this.placeholder = '请输入客户名称搜索'
        break
      case 'client':
        this.placeholder = '请输入客户名称搜索'
        break
      case 'goods':
        this.placeholder = '请输入商品名称搜索'
        break
    }
  },
  // 监听触底
  onReachBottom() {
    this.getData()
  },
  onPullDownRefresh() {
    this.search()
  },
  methods: {
    clickBack() {
      uni.navigateBack({ delta: 1 })
    },
    clear() {
      this.list = []
      this.params.keyword = ''
      this.params.pageNumber = 1
    },
    search() {
      this.list = []
      this.params.pageNumber = 1
      switch (this.type) {
        case 'client':
          this.getClientData()
          break
        case 'bill':
          this.getBillData()
          break
        case 'goods':
          this.getGoodsData()
          break
      }
    },
    getClientData() {
      getClientList(this.params).then(res => {
        if (res.code === 200) {
          this.list.push(...res.data.records)
          this.total = res.data.pages
        }
      })
    },
    getGoodsData() {
      getSearchList(this.params).then(res => {
        if (res.code === 200) {
          this.list.push(...res.data.records)
          this.total = res.data.pages
        }
      })
    },
    // 首页中间+
    getBillData() {
      getCartsList(this.params).then(r => {
        if (r.code === 200) {
          this.list.push(...r.data.records)
          this.total = r.data.pages
        }
      })
    },
    getData() {
      if (this.total !== this.params.pageNumber) {
        this.params.pageNumber++
        switch (this.type) {
          case 'client':
            this.getClientData()
            break
          case 'bill':
            this.getBillData()
            break
          case 'goods':
            this.getGoodsData()
            break
        }
      }
    },
    goBill(id) {
      uni.navigateTo({ url: '/invoicer/carts?id=' + id })
    },
    // 客户类型
    setType(e) {
      let a
      this.molds.forEach(i => {
        if (i.id === e) {
          a = i.name
        }
      })
      return a
    }
  },
  onShow() {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = self.tabBarHeight
        // #endif
      }
    })

    if (this.type !== 'goods') {
      getPurchaser().then(res => {
        if (res.code === 200) {
          this.molds = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home_top_bg {
  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    background-size: 100%;
    color: black;
    background: #fff;
    font-size: 32rpx;
  }

  .top_cont {
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    background: #fff;
  }

  .seach {
    position: relative;
    /* #ifdef MP-WEIXIN */
    width: 50%;
    /* #endif */
    /* #ifndef MP */
    width: 75%;
    /* #endif */
    /* #ifdef MP-TOUTIAO */
    width: 80%;
    /* #endif */
    height: 56rpx;
    margin: 0 20rpx;
    background: #f9f9f9;
    border-radius: 56rpx;

    .search {
      position: absolute;
      top: 15%;
      left: 0;
      padding: 4rpx 15rpx 10rpx;
    }

    input {
      height: 56rpx;
      margin: 0 56rpx 0 56rpx;
      font-size: 29rpx;
    }

    .clear {
      position: absolute;
      top: 15%;
      right: 0;
      z-index: 100;
      padding: 4rpx 15rpx 10rpx;
    }
  }

  text {
    font-size: 30rpx;
    height: 56rpx;
    line-height: 56rpx;
    // padding-right: 20rpx;
  }
}

.notFound {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  image {
    width: 167.36rpx;
    height: 211.11rpx;
  }

  text {
    font-weight: 400;
    font-size: 29rpx;
    color: #b9b9b9;
  }
}

.list {
  padding-bottom: 20rpx;

  .item {
    background: #ffffff;
    border-radius: 11rpx;
    font-size: 29rpx;
    margin: 25rpx;
    padding: 34.72rpx 0 34.72rpx 24.31rpx;
    .label_red {
      color: #ef231b;
    }

    .label_margintop {
      display: flex;
      margin-top: 34.03rpx;
    }
    .label {
      color: #8d8d8d;
      width: 160rpx;
    }
    .value {
      width: 80%;
    }

    .bill {
      margin-top: 24.31rpx;
      display: flex;
      justify-content: flex-end;

      .btn {
        width: 142rpx;
        height: 58rpx;
        line-height: 56rpx;
        background: #2871fc;
        border-radius: 29rpx;
        font-size: 25rpx;
        color: #ffffff;
        text-align: center;
        margin-right: 25rpx;
      }
    }
  }
}

.goods-list {
  background: #ffffff;
  border-radius: 11rpx;
  margin: 20rpx 25rpx;
  padding: 34rpx 20rpx;
}
</style>
